let layer = layui.layer;

// ============================= 生成裁切区域 =============================
let $image = $(".container img");
$image.cropper({
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域 (把预览的图片放到哪去)
  preview: ".preview",
});

// ====================  点击好看的按钮，模拟点击了文件域 ================
$("#btnChooseImage").on("click", function () {
  $("#file").click();
});

// =============================  给文件域注册change事件 =============================
$("#file").on("change", function () {
  let file = this.files[0];
  // console.log(file);

  // 细节优化：如果没有选择，后续代码不执行并提示用户
  if (!file) {
    return layer.msg("请选择文件");
  }

  let newImgSrc = URL.createObjectURL(file);
  // console.log(newImgSrc);

  $image.cropper("destroy").attr("src", newImgSrc).cropper({
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域 (把预览的图片放到哪去)
    preview: ".preview",
  });
});

// ============================= 上传新头像 =============================
$("#btnCreateAvatar").on("click", function () {
  // 把裁切的图片弄成canvas
  let canvasObj = $image.cropper("getCroppedCanvas", {
    // 创建一个 Canvas 画布
    width: 100,
    height: 100,
  });

  // 得到base64的字符串
  let baseStr = canvasObj.toDataURL("image/png");
  // console.log(baseStr);
  // encodeURL; encodeURIComponent; 编码处理

  // 发送数据 "name=admin&pwd=12344"
  axios
    .post("/my/update/avatar", "avatar=" + encodeURIComponent(baseStr))
    .then((res) => {
      console.log(res);

      if (res.data.status !== 0) {
        // 失败
        return layer.msg(res.data.message);
      }

      layer.msg(res.data.message);
      // 调用父页面index页面的getUserInfo函数 ==> 重新渲染展示头像
      window.parent.getUserInfo();
    });
});
